<template>
  <view class="tabbar-container flex items-center" :style="`padding-bottom: ${safeBottom}px;`">
    <!-- isRound是中间凸出样式的标志，用来判断当前子级是否是凸出样式的 -->
    <view :class="!item.isRound ? 'square' : 'is-square'" v-for="(item, index) in tabbarList" :key="index"
      @click="tabbarChange(index, item)">
      <!-- 不是凸出的子级 -->
      <template v-if="!item.isRound">
        <view class="item-top flex justify-center flex-col">
          <image :src="active == index ? item.selectedIconPath : item.iconPath" :style="`width:${item.width};height:${item.height};`" /> 
        </view>
        <view class="item-bottom" :class="{ 'active': active === index }">
          <text>{{ item.text }}</text>
        </view>
      </template>
      <!-- 凸出的子级 -->
      <template v-else>
        <view class="flex flex-col justify-center items-center center-round">
          <view class="flex flex-col justify-center items-center">
            <image :src="active == index ? item.selectedIconPath : item.iconPath" :style="`width:${item.width};height:${item.height};`" />
            <text :class="{ 'round-active': active === index }">{{ item.text }}</text>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>
<script>
export default {
  name: 'Tabbar',
  props: {
    tabbarIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // tabbar列表，配置自定义用到的属性字段
      tabbarList: [{
        pagePath: "/pages/index/index",
        iconPath: "/static/images/1-001.png",
        selectedIconPath: "/static/images/1-002.png",
        text: "首页",
        width: '45rpx',
        height: '41rpx',
        isRound: false
      },
      {
        pagePath: "/pages/goods_cate/index",
        iconPath: "/static/images/2-001.png",
        selectedIconPath: "/static/images/2-002.png",
        text: "数据",
        width: '44rpx',
        height: '43rpx',
        isRound: false
      },
      {
        pagePath: "/pages/order_addcart/index",
        iconPath: "/static/logo.png",
        selectedIconPath: "/static/logo.png",
        text: "智能推荐",
        width: '120rpx',
        height: '120rpx',
        isRound: true
      },
      {
        pagePath: "/pages/order_addcart/index",
        iconPath: "/static/images/3-001.png",
        selectedIconPath: "/static/images/3-002.png",
        text: "会员",
        width: '39rpx',
        height: '37rpx',
        isRound: false
      },
      {
        pagePath: "/pages/user/index",
        iconPath: "/static/images/4-001.png",
        selectedIconPath: "/static/images/4-002.png",
        text: "我的",
        width: '40rpx',
        height: '41rpx',
        isRound: false
      },
      ],
      active: 0,
      safeBottom: 0,
    }
  },
  mounted() {
    const systemInfo = uni.getSystemInfoSync();
    this.safeBottom = systemInfo.screenHeight - systemInfo.safeArea.bottom - 12;
    console.log(this.safeBottom,systemInfo);
    this.active = this.tabbarIndex
  },
  methods: {
    tabbarChange(index, item) {
      this.$emit('updateTabbar', index)
      uni.switchTab({
        url: item.pagePath
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.tabbar-container {
  width: 100%;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  justify-content: space-between;
  // padding-bottom: constant(safe-area-inset-bottom);
  // padding-bottom: env(safe-area-inset-bottom);
  background: #FFFFFF;
  

  .square {
    width: 100%;
    // padding-top: 25rpx;
    height: 130rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .round-active {
      color: #207BDB;
    }
  }

  .square .item-top {
    width: 45rpx;
    height: 45rpx;
  }

  .is-square {
    width: 100%;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .round-active {
      color: #207BDB;
    }
  }

  .center-round {
    width: 203rpx;
    height: 130rpx;
    position: absolute;
    margin-top: -72rpx;
    text-align: center;

    image{
      border-radius: 50%;
    }

    text {
      font-weight: 500;
      font-size: 20rpx;
      color: #555B66;
      display: block;
    }
  }

  .item-bottom {
    font-weight: 500;
    font-size: 20rpx;
    color: #555B66;
    margin-top: 14rpx;
  }

  .active {
    color: #207BDB;
  }
}
</style>
